<template>
  <div id="completeInformation">
    <Top :title="title"></Top>
    <p class="top-alert">为了快捷体验我们的服务，请您完善信用认证</p>
    <section class="info-container">
      <ul class="info-list">
        <li class="info-list-item">
          <div class="info-list-item-left">
            <img src="../../../assets/icon/shenfen.png" alt="">
          </div>
          <div class="info-list-item-center">
            <h3>身份认证</h3>
            <p>防范身份信息被冒用，确保资金安全</p>
          </div>
          <div class="info-list-item-right primary-fc" v-if="!isIdCard" @click="goPage('/mine/identityAuthentication.html?perPath=completeInfo')">
            去完成<i class="icon iconfont icon-jiankuohaoxiyou"></i>
          </div>
          <div class="info-list-item-right complete-fc" v-else>
            已完成<i class="icon iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </li>
        <li class="info-list-item">
          <div class="info-list-item-left">
            <img src="../../../assets/icon/card.png" alt="">
          </div>
          <div class="info-list-item-center">
            <h3>绑定到储蓄卡</h3>
            <p>所有款项，均进入此储蓄卡</p>
          </div>
          <div class="info-list-item-right primary-fc" v-if="!isMoneyCard" @click="linkAddCard">
            去完成<i class="icon iconfont icon-jiankuohaoxiyou"></i>
          </div>
          <div class="info-list-item-right complete-fc" v-else>
            已完成<i class="icon iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </li>
      </ul>
    </section>
    <div v-if="isCompleteAll">
      <p class="complete-alert-word">恭喜您！完成了资料填写，接下来我们要去</p>
    <section class="link-container">
      <div class="link-box link-left" @click="goPage('/main/recommentproduct')">
        <h3>贷款</h3>
        <p>多种优质贷款产品</p>
      </div>
      <div class="link-box link-right" @click="goPage('/main/mine/enchash/getMoney')">
        <h3>信用卡取现</h3>
        <p>极速取现，消费无忧</p>
      </div>
    </section>
    </div>
    
  </div>
</template>
<script>
import Vue from 'vue'
import "../../../js/lib/flexble.js";
import bus from "../../../js/lib/bus.js";
import util from "../../../js/lib/util.js";
import commons from "../../../common/js/common.js";
import Top from "components/Header/Header";
import { MessageBox, Toast,Indicator } from "mint-ui";
export default {
  name: "completeInfo",
  components: { Top },
  computed: {
    isCompleteAll() {
      if (this.isIdCard && this.isMoneyCard) {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    return {
      title: "完善资料",
      isIdCard: false,
      isMoneyCard: false,
      list: [
        {
          img: "../../../assets/icon/shenfen@3x.png",
          title: "身份认证",
          text: "防范身份信息被冒用，确保资金安全"
        },
        {
          img: "../../../assets/icon/ka@3x.png",
          title: "绑定到储蓄卡",
          text: "所有款项，均进入此储蓄卡"
        }
      ]
    };
  },
  created() {
    bus.$on("registerSuccess", res => {
      Toast("恭喜您，注册成功！");
    });

    let isIdCard = util.getQueryString("isIdCard"),
      isMoneyCard = util.getQueryString("isMoneyCard");
    if (isIdCard) {
      this.isIdCard = isIdCard;
    }
    if (isMoneyCard) {
      this.isMoneyCard = isMoneyCard;
    }
  },
  mounted() {
    //document.setTitle('完善资料');
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
  },
  methods: {
    linkAddCard() {
      let isIdCard = this.isIdCard;
      if (isIdCard) {
        location.href = commons.paths+"/enchash/addcard.html?active=2&perPath=completeInfo";
      } else {
        MessageBox("提示", "请先进行身份认证！");
      }
    },
    goPage(url) {
      location.href = commons.paths + url;
    }
  }
};
</script>

<style lang="scss">
@import "../../../scss/base.scss";
.top-alert {
  margin-top: 1.2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: left;
  text-indent: 0.5rem;
  color: $navColor;
}
.complete-alert-word {
  @include textAlign(1.3rem);
  text-align: center;
  margin-top: 1rem;
}
.info-container {
  background-color: #ffffff;
  box-sizing: border-box;
  padding-left: 0.5rem;
  .info-list {
    &-item {
      @include flexContainer;
      border-bottom: 1px solid $borderColor;
      box-sizing: border-box;
      padding: 0.5rem 0;
      align-items: center;
      &:last-child {
        border: 0;
      }
      & > div {
        @include flexItem;
      }
      &-left {
        img {
          height: 0.7rem;
        }
      }
      &-center {
        width: 60%;
        text-align: left;
        h3 {
          font-size: 0.4rem;
        }
        p {
          color: $iconColor;
        }
      }
      &-right {
        font-size: 0.4rem;
      }
      .primary-fc {
        color: $primaryDeepColor;
      }
      .complete-fc {
        color: $iconColor;
      }
    }
  }
}
.link-container {
  @include flexContainer;
  .link-box {
    @include flexItem;
    padding: 0.2rem;
    width: 42%;
    color: #ffffff;
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
    h3 {
      font-size: 0.45rem;
      font-weight: 300;
    }
  }
  .link-left {
  }
  .link-right {
  }
}
</style>


